<template>
	<div class="collageWrap">
		<div class="sort flex-h">
			<div class="flex1" @click="colls(item,index)" v-for="(item,index) in leiList" :key="index">
				<i :style="item.state==true?'color:#FFAD0D':''">{{item.title}}</i>
				<b style="display: none;">{{resultCategoryId==index?'':item.state=false}}</b>


				<img class="imgIcon" :src="item.state?img1:img2" />
			</div>
		</div>
		<div :class="['bigBox',swi?'ss':'bb']" @click.stop="closeSort">
		</div>
		<div :class="['box',swi&&tabindex===0?'box11':swi&&tabindex===1?'box11':swi&&tabindex===2?'box12': 'box2']">
			<div :class="['diss',tabindex===0?'':'disShow']">
				<div class="sbx1 commonItem">
					<div class="swiper-container sbx11" id="labSwiper0">
						<div class="swiper-wrapper">
							<div class="swiper-slide zhuanti">

								<checker v-model="selects1" default-item-class="demo1-item" selected-item-class="demo1-item-selected" type="checkbox">
									<checker-item value="" @on-item-click="dianlno">
										<span>不限</span>
									</checker-item>
									<checker-item v-for="(item, index) in areaData" :value="item.label" :key="index+1000" @on-item-click="dianlye"><span>{{item.label}}</span>
									</checker-item>
								</checker>
							</div>
						</div>
					</div>
					<div class="btnBox flex-h">
						<span class="flex1 bt1">可多选</span>
						<span class="bt2" @click='clearBtn1'>重置</span>
						<span class="bt3" v-on:click="sendMsgToParents1">确定</span>
					</div>
				</div>
			</div>
			<div :class="['diss',tabindex===1?'':'disShow']">
				<div class="sbx1 commonItem">
					<div class="swiper-container sbx11" id="labSwiper">
						<div class="swiper-wrapper">
							<div class="swiper-slide zhuanti">
								<span class="checktitle" v-show="items5.length>0">办学层次</span>

								<checker v-show="items5.length>0" v-model="selects5" default-item-class="demo1-item" selected-item-class="demo1-item-selected"
								 type="checkbox">

									<checker-item value="" @on-item-click="dianlno4"><span>不限</span></checker-item>
									<checker-item v-for="(item, index) in items5" :value="item.id" :key="index" @on-item-click="dianlye4(item.id)"><span>{{item.desc}}</span></checker-item>
								</checker>
								<span class="checktitle">院校特色</span>
								<checker v-model="selects2" default-item-class="demo1-item" selected-item-class="demo1-item-selected" type="checkbox">

									<checker-item value="" @on-item-click="dianlno1"><span>不限</span></checker-item>
									<checker-item v-for="(item, index) in items2" :value="item.id" :key="index" @on-item-click="dianlye1"><span>{{item.desc}}</span></checker-item>
								</checker>
								<span class="checktitle">院校类型</span>
								<checker v-model="selects3" default-item-class="demo1-item" selected-item-class="demo1-item-selected" type="checkbox">
									<checker-item value="" @on-item-click="dianlno2"><span>不限</span></checker-item>

									<checker-item v-for="(item, index) in items3" :value="item.desc" :key="index" @on-item-click="dianlye2"><span>{{item.desc}}</span></checker-item>
								</checker>
								<span class="checktitle">院校性质</span>
								<checker v-model="selects4" default-item-class="demo1-item" selected-item-class="demo1-item-selected" type="checkbox">

									<checker-item value="" @on-item-click="dianlno3"><span>不限</span></checker-item>
									<checker-item v-for="(item, index) in items4" :value="item.desc" :key="index" @on-item-click="dianlye3"><span>{{item.desc}}</span></checker-item>
								</checker>

							</div>
						</div>
					</div>
					<div class="btnBox flex-h" style="z-index: 100;">
						<span class="flex1 bt1">可多选</span>
						<span class="bt2" @click='clearBtn2'>重置</span>
						<span class="bt3" v-on:click="sendMsgToParents1">确定</span>
					</div>
				</div>
			</div>
			<div :class="['diss',tabindex===2?'':'disShow']">
				<div class="sbx2 listSort">
					<checker radio-required v-model="sorts" default-item-class="demo-course-item" selected-item-class="demo-course-item-selected">
						<checker-item v-on:on-item-click="sendMsgToParents1" v-for="(item, index) in itemsSort" :value="item.msg" :key="index"><span>{{item.name}}</span></checker-item>
					</checker>
				</div>

			</div>
		</div>
	</div>
</template>

<script>
	import 'swiper/dist/css/swiper.css'
	import Swiper from 'swiper';
	import {getbatch} from "~/api/colleges";
	import ls from 'store2';
	import {
		Checker,
		CheckerItem
	} from 'vux'
	export default {
		components: {
			Checker,
			CheckerItem,
		},
		props: {
			message: String,
			col: String,
			items1: Array
		},

		data() {
			return {
				areaData: [{
						label: "北京"
					}, {
						label: "上海"
					},
					{
						label: "浙江"
					},
					{
						label: "江苏"
					},
					{
						label: "广东"
					},
					{
						label: "天津"
					},
					{
						label: "湖北"
					},
					{
						label: "重庆"
					},
					{
						label: "湖南"
					},
					{
						label: "四川"
					},
					{
						label: "山东"

					},
					{
						label: "陕西"
					},
					{
						label: "福建"
					},
					{
						label: "辽宁"
					},
					{
						label: "安徽"

					},
					{
						label: "河北"
					},
					{
						label: "河南"
					},
					{
						label: "江西"
					},

					{
						label: "云南"
					},
					{
						label: "海南"
					},
					{
						label: "贵州"
					},
					{
						label: "广西"
					},
					{
						label: "山西"
					},
					{
						label: "吉林"
					},
					{
						label: "黑龙江"
					},
					{
						label: "甘肃"
					},
					{
						label: "内蒙古"
					},
					{
						label: "宁夏"
					},

					{
						label: "青海"
					},
					{
						label: "新疆"
					},
					{
						label: "西藏"
					}
				],
				img1: require('~/static/school_icon_arrow_up.png'),
				img2: require('~/static/school_icon_arrow_down.png'),
				selects1: [""],
				selects2: [""],
				selects3: [""],
				selects4: [""],
				selects5: [""],
				items2: [{
						"id": 1,
						"desc": "C9"
					},
					{
						"id": 2,
						"desc": "211"
					},
					{
						"id": 3,
						"desc": "985"
					},
					{
						"id": 4,
						"desc": "双一流院校"
					},
					{
						"id": 5,
						"desc": "双一流学科"
					}
				],
				items3: [


					{
						"id": 6,
						"desc": "综合"
					},
					{
						"id": 7,
						"desc": "理工"
					},
					{
						"id": 8,
						"desc": "财经"
					},
					{
						"id": 9,
						"desc": "农林"
					},
					{
						"id": 10,
						"desc": "医药"
					},
					{
						"id": 11,
						"desc": "师范"
					},
					{
						"id": 12,
						"desc": "体育"
					},
					{
						"id": 13,
						"desc": "政法"
					},
					{
						"id": 14,
						"desc": "艺术"
					},
					{
						"id": 15,
						"desc": "民族"
					},
					{
						"id": 16,
						"desc": "军事"
					},
					{
						"id": 17,
						"desc": "语言"
					}
				],
				items4: [{
						"id": 19,
						"desc": "公办"
					},
					{
						"id": 20,
						"desc": "民办"
					},
					{
						"id": 22,
						"desc": "中外合作"
					},

					{
						"id": 23,
						"desc": "独立学院"
					}

				],
				items5: [],
				itemsSort: [{
						"name": "智能排序",
						"msg": "combined"
					},
					{
						"name": "人气优先",
						"msg": "popularity"
					},
					{
						"name": "分数优先",
						"msg": "fraction"
					}
				],
				leiList: [{
						title: '地区',
						state: false,
					},
					{
						title: '筛选',
						state: false,
					},
					{
						title: '排序',
						state: false,
					}
				],
				// items1: [],
				demo1Checkbox: "全部",
				tabindex: 10,
				swi: false,
				sorts: "combined"
			};
		},

		computed: {
			resultCategoryId() {

				return this.tabindex;
			}

		},
		watch: {

			selects1(e) {
				e[0] == '' ? this.requirement1 = [] : this.requirement1 = e;

			},
			selects2(e) {
				e[0] == '' ? this.labels = [] : this.labels = e;

			},
			selects3(e) {
				e[0] == '' ? this.levels = [] : this.levels = e;
			},
			selects4(e) {
				e[0] == '' ? this.attrs = [] : this.attrs = e;
			},
			selects5(e) {
				e[0] == '' ? this.batcher = [] : this.batcher = e;
			},
			sorts(e) {
				this.sorts = e
			}

		},
		created() {
			let optins = JSON.parse(sessionStorage.getItem('options'));
			if (optins) {
				this.options = optins
				this.requirement1 = optins.provinceIds;
				this.attrs = optins.attrs
				this.levels = optins.levels
				this.opsort = optins.opsort
				this.labels = optins.labels

				optins.provinceIds.length == 0 ? this.selects1 = [""] : this.selects1 = optins.provinceIds
				optins.labels.length == 0 ? this.selects2 = [""] : this.selects2 = optins.labels
				optins.attrs.length == 0 ? this.selects4 = [""] : this.selects4 = optins.attrs
				optins.levels.length == 0 ? this.selects3 = [""] : this.selects3 = optins.levels
				optins.batchs.length == 0 ? this.selects5 = [""] : this.selects5 = optins.batchs
				this.sorts = optins.opsort
			} else {
				this.selects1[0] = ls.get('userArea')
			}
		},
		mounted: function() {
			this.courseSwip2();
			this.courseSwip1();
			// this.showBatch()
		},

		methods: {

			showBatch() {
				
				getbatch().then(res => {
					if (res.code === '0') {
						this.items5 = res.data;
					}

				}).catch((error) => {
					this.$vux.toast.text('暂无数据');
				})
			},
			dianlno() {


				this.selects1 = ['']
			},
			dianlno1() {
				this.selects2 = ['']
			},
			dianlye1() {
				if (this.selects2[0] === '') {
					this.selects2.splice(0, 1)
				}
			},
			dianlno2() {
				this.selects3 = ['']
			},
			dianlye2() {
				if (this.selects3[0] === '') {
					this.selects3.splice(0, 1)
				}
			},
			dianlno3() {
				this.selects4 = ['']

			},
			dianlye3() {
				if (this.selects4[0] === '') {
					this.selects4.splice(0, 1)
				}

			},
			dianlye4(ids) {
				if (this.selects5[0] === '') {
					this.selects5.splice(0, 1)
				}

			},
			dianlno4() {
				this.selects5 = ['']

			},
			dianlye() {

				if (this.selects1[0] === '') {
					this.selects1.splice(0, 1)
				}
			},
	
			sendMsgToParents1(e) {
				let opsort;
				typeof(e) === 'object' ? opsort = this.sorts: opsort = e;
				let are = []
				are[0] = ls.get('userArea')
				let option = {
					'provinceIds': this.requirement1 || are,
					'attrs': this.attrs || [],
					'levels': this.levels || [],
					'labels': this.labels || [],
					'opsort': opsort,
					'batchs': this.batcher || []
				}

				this.$emit("listenToChild", option);
				this.closeSort();
			},
			clearBtn1() {
				this.selects1 = ['']



			},
			clearBtn2() {
				this.selects2 = [''];
				this.selects3 = [''];
				this.selects4 = [''];
				this.selects5 = [''];

			},
			courseSwip2() {
				var mySwiper = new Swiper("#labSwiper", {
					// scrollbar: '.swiper-scrollbar',
					direction: 'vertical',
					slidesPerView: 'auto',
					mousewheelControl: true,
					freeMode: true,
					observer: true, //修改swiper自己或子元素时，自动初始化swiper
					observeParents: true, //修改swiper的父元素时，自动初始化swiper				
				});
			},
			courseSwip1() {
				var mySwiper = new Swiper("#labSwiper0", {
					// scrollbar: '.swiper-scrollbar',
					direction: 'vertical',
					slidesPerView: 'auto',
					mousewheelControl: true,
					freeMode: true,
					observer: true, //修改swiper自己或子元素时，自动初始化swiper
					observeParents: true, //修改swiper的父元素时，自动初始化swiper				
				});
			},
			colls(item, index) {
				this.tabindex = index
				item.state = !item.state;
				this.swi = item.state;
				switch (index) {
					case 0:

						break;
					case 1:

						break;

				}
			},
			closeSort() {
				this.swi = false;
				this.$set(this.leiList[this.tabindex], 'state', false)
			},

			allItemClick(ids, lei) {

				this.swi = false
				this.$set(this.leiList[ids], 'state', false)

			},





		}
	};
</script>


<style scoped lang="less">
	.bigBox {
		position: absolute;
		top: 92px;
		left: 0;
		width: 7.5rem;
		height: 100%;
		z-index: -1;
		transition: all 0s;

	}

	.box {
		width: 7.5rem;
		height: 0;
		overflow: hidden;
		cursor: pointer;
		transition: all 0.3s;
		z-index: 3;
		background: #fff;
		position: relative;

		.diss {
			z-index: 1;

			.sbx {
				width: 7.5rem;
				height: 250px;
			}

			.sbx2 {
				width: 7.5rem;
				height: 3.6rem;
			}

			.sbx1 {
				width: 7.5rem;
				height: 6rem;
				padding-bottom: 0.2rem;

				.sbx11 {
					height: 5rem;
					width: 7.5rem;
				}

				.btnBox {
					width: 7.5rem;
					height: 1rem;
					padding-left: 0.4rem;
					padding-right: 0.3rem;
					box-sizing: border-box;

					.bt1 {
						color: #BBBBBB;
						font-size: 0.26rem;
					}

					.bt2,
					.bt3 {
						width: 2rem;
						height: 0.7rem;
						border-radius: 0.35rem;
						text-align: center;
						line-height: 0.7rem;
						font-size: 0.3rem;
						font-weight: bold;


					}

					.bt2 {
						border: 0.02rem solid #EEEEEE;
						color: #BBBBBB;

					}

					.bt3 {
						background: @mainColor;				
						color: #FFFFFF;
						margin-left: 0.2rem;

					}
				}

				.zhuanti {
					width: 7.5rem;
					height: auto;
					-webkit-box-sizing: border-box;
					box-sizing: border-box;

					.checktitle {
						display: block;
						width: 100%;
						padding: 0 0.3rem;
						box-sizing: border-box;
						font-size: 0.26rem;
						font-weight: bold;
						color: rgba(187, 187, 187, 1);
						line-height: 0.3rem;
						margin-top: 0.15rem;
					}

				}
			}

			.commonItem {
				.vux-checker-box {
					width: 100%;
					height: auto;
					display: flex;
					flex-wrap: wrap;
					padding: 0 0.15rem;
					box-sizing: border-box;

					.vux-checker-item {
						flex: 1;
						min-width: 2.4rem;
						max-width: 2.4rem;
						height: 0.7rem;
						box-sizing: border-box;
						margin-top: 0.24rem;
						border: none;

						span {
							display: block;
							height: 0.7rem;
							width: 2.14rem;
							background: #FAFAFA;
							text-align: center;
							line-height: 0.7rem;
							margin: 0 auto;
							border-radius: 0.08rem;
							color: #222222;
							font-size: 0.3rem;

						}
					}

					.demo1-item-selected {
						span {
							border: 0.02rem solid @mainColor;
							color: @mainColor;
							background: #fff
						}
					}

					.vux-tap-active:active {
						background: none;
					}
				}
			}

		}

		.disShow {
			height: 0;
			transition-delay: 0s;

			opacity: 0;
			overflow: hidden;
		}
	}

	.box1 {
		height: 250px;


	}

	.box11 {
		height: 6rem;

	}

	.box12 {
		height: 3.6rem;
	}

	.box2 {
		height: 0;

	}

	.box ul {
		list-style: none;
		margin: 0;
		padding: 0;
	}

	.box ul li {
		width: 7.5rem;
		height: 48px;
		line-height: 50px;
		text-align: center;
		border: 1px @warnColor solid;
		background: #000000;
		color: white;
	}

	.sort {
		width: 7.5rem;
		height: 0.88rem;
		text-align: center;
		line-height: 0.88rem;
		background: #fff;
		border-bottom: 1px solid #e0e0e0;

		div {

			i,
			.imgIcon {
				display: inline-block;
				vertical-align: middle;
			}

			i {
				font-size: 0.3rem;
				color: #222;
				font-weight: bold
			}

			.imgIcon {

				height: 0.3rem;
				width: 0.3rem;
				margin-left: 0.1rem;
			}
		}
	}



	.ss {
		z-index: 2;
		background: rgba(0, 0, 0, 0.5);
	}

	.bb {
		transition-delay: 0.3s;
		z-index: -1;
		height: 0;
	}

	.listSort {

		position: relative;

		.vux-checker-box {
			width: 100%;
			height: 3.6rem;
			font-size: 0.3rem;

			.vux-checker-item {
				width: 100%;
				height: 0.9rem;
				line-height: 0.9rem;
				color: #222222;
				font-size: 0.3rem;
				padding-left: 1rem;
				padding-right: 0.3rem;
				box-sizing: border-box;
			}
		}

	}

	.demo-course-item-selected {
		color: @mainColor !important;
	}

	// 	.demo-course-item-selected:after {
	// 		content: "√";
	// 		float: right;
	// 		color: #6CBF20;
	// 		font-size: 0.3rem;
	// 	}
	.demo-course-item-selected:before {
		content: "✔";
		position: absolute;
		// top: 0;
		left: 0.6rem;
		color: @mainColor;
		font-size: 0.3rem;
	}
</style>
